<template>
	<view class="wap">
		<view class="variety-navigation">
			<view class="variety-text">
				<view class="variety-navigation-icons flex-y-center">
					<view class="flex-y-center" style="margin-right: 10px;" @click="juliChange()">
						<view>距离</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[juliup==true?'arrowup':'arrowdown']">
						</image>
					</view>
					<view class="flex-y-center" style="margin-right: 10px;" @click="jiageChange()">
						<view>价格</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[jiageup==true?'arrowup':'arrowdown']">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="li" v-for="(item,index) in data.data_list" :key="index">
				<image class="good-img" :src="item.image"></image>
				<view class="good-info">
					<view class="good-name">
						<image class="center-img" @click="goMeiTuan" v-if="item.platform==='meituan'"
							src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135754183391.png">
						</image>
						<image class="center-img" @click="goEleme" v-if="item.platform==='eleme'"
							src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135650804211.png">
						</image>
						{{item.name}}
					</view>
					<view class="good-desc">
						<view class="good-rules" v-if="item.rule && item.activity.length == 1">
							<view class="good-tag "
								:class="{'good-tag-red':rule_index==0,'good-tag-orange':rule_index==1,'good-tag-green':rule_index==2}"
								v-for="(rule,rule_index) in item.rule.split('|')" :key="rule_index">{{rule}}</view>
						</view>
					</view>
					<view class="good-active ">
						<view class="good-time">
							<view class="good-distance" :style="item.activity.length>1?'margin-top:40rpx':''">
								距离：{{item.distance}}</view>
							<text
								v-if="item.activity.length == 1">抢单时间：{{item.activity[0].start_end_array[0]}}-{{item.activity[0].start_end_array[1]}}</text>
						</view>
						<view class="good-progress" v-if="item.activity.length==1">
							<view class="progress-line">
								<view class="line"
									:style="{width:item.activity[0].stock/item.activity[0].total_stock*100+'%'}"></view>
							</view>
							还剩<text>{{item.activity[0].stock}}</text>份
						</view>
					</view>
					<view v-if="item.activity.length>1" class="good-active" style="width: 100%;margin-top: 35rpx;">
						共{{item.activity.length}}个活动</view>
					<view class="good-pay" v-if="item.activity&&item.activity.length==1"
						@click="storeTap(item.activity[0],item)">去抢单</view>
				</view>
				<view style="width:100%" v-if="item.activity&&item.activity.length>1">
					<view class="actives" v-for="(col,col_index) in item.activity" :key="index">
						<view class="active-name">活动{{col_index+1}}</view>
						<view class="active-info">
							<view class="good-rules">
								<view class="good-tag "
									:class="{'good-tag-red':rule_index==0,'good-tag-orange':rule_index==1,'good-tag-green':rule_index==2}"
									v-for="(rule,rule_index) in col.rule_list" :key="rule_index">{{rule}}</view>
								<view class="active-progress">
									还剩<text>{{col.stock}}</text>份
									<view class="active-line">
										<view class="line" :style="{width:col.stock/col.total_stock*100+'%'}"></view>
									</view>
								</view>
							</view>
							<view style="display: flex;align-items: center;margin-top: 20rpx;">
								<view class="active-time">{{col.start_end_array[0]}}-{{col.start_end_array[1]}}</view>


							</view>
							<view class="good-pay" @click="storeTap(item.activity[0],item)">去抢单</view>
						</view>

					</view>
				</view>

			</view>

		</view>
		<!-- <view>
			<view class="bottom-text">我也是有底线的</view>
		</view> -->
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
			加载中...
		</view>

	</view>
</template>

<script>
	import {
		getStoreList,
		getStoreCat,
		getTagInfo
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock: 0,
				juliup: false,
				jiageup: false,
				sort: 0,
				latitude: '',
				longitude: '',
				tag_id: 0,
				kwd: '',
				cat_list: [],
			}
		},

		onLoad(options) {
			let region = uni.getStorageSync('region')
			if (region) {
				region = JSON.parse(region)
			}
			this.longitude =region.longitude
			this.latitude = region.latitude
			this.tag_id = options.tag || 0;
			this.kwd = options.kwd || '';
		},
		onShow() {
			this.data = {
				data_list: [],
				no_list: !1,
				no_more: !1,
				current_page: 0,
				loading_more: !0,
			};
			this.loadDataList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		methods: {

			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				// if (!o.longitude || !o.latitude) {
				// 	return;
				// }
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						latitude: o.latitude,
						longitude: o.longitude,
						tag_id: o.tag_id,
						juliup: o.juliup ? 1 : 0,
						jiageup: o.jiageup ? 1 : 0,
						category_id: o.cat_id || 0,
						sort: o.sort,
						keyword: o.kwd || '',
					}
					o.lock = 1;
					console.log(o.lock)
					getStoreList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
									o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}

						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			storeTap(item,store) {
				
				if (!item) {
					return;
				}
				if (parseInt(item.open_buy) == 0) {
					let time = item.open_start + "-" + item.open_end;
					uni.showToast({
						icon: 'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});
				
				} else if (parseInt(item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} else {
					this.distance = store.distance;
					uni.navigateTo({
						url: `/pages/details/newDetail?id=${item.store_id}&activity_id=${item.id}&distance=${store.distance}`
					})
				}

			},
		},
	}
</script>

<style scoped lang="scss">
	.variety-text {
		padding: 10px 15px;
		color: #afb0b1;
		font-size: 26rpx;
		border-bottom: 1px solid #e7e7e7
	}

	.arrowup {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	.variety-image {
		margin: 0px 5px;
		width: 12px;
		height: 12px
	}

	.li {
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-left:  20rpx;
		margin-top: 20rpx;

		.good-rules {
			flex: 1;
			display: flex;
			align-items: center;

			.good-tag {
				font-size: 24rpx;
				padding: 2rpx 10rpx;
				border-radius: 5rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15rpx;
				overflow: hidden;
			}

			.good-tag-red {
				background-color: #ff5748;
				border: 1rpx solid #ff5748;
				color: #fff;

			}

			.good-tag-orange {

				color: #ff7701;
				border: 1rpx solid #ff7701;
				border-radius: 5rpx;
			}

			.good-tag-green {
				color: #1bc182;
				border: 1rpx solid #1bc182;
				border-radius: 5rpx;
			}
		}


		.good-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.good-info {
			flex: 1;
			position: relative;



			.good-name {
				font-size: 32rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;

				.center-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.good-desc {
				display: flex;
				flex-wrap: wrap;

				.good-pos-center {
					text-align: center;
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;

					.center-img {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: red;
					}

					.centet-txt {
						font-size: 24rpx;
						color: #999;
					}
				}


			}

			.good-active {
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;

				.good-time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-direction: row-reverse;
					font-size: 20rpx;
					color: #999;
					margin-bottom: 30rpx;

					.good-distance {}
				}

				.good-progress {
					display: flex;
					align-items: center;

					.progress-line {
						width: 120rpx;
						height: 15rpx;
						border-radius: 10rpx;
						background-color: #ffcac6;
						margin-right: 10rpx;

						.line {
							width: 20%;
							height: 100%;
							background-color: #ff5748;
							border-radius: 10rpx;
						}
					}

					text {
						color: #ff5748;
					}

				}
			}

			.good-pay {
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: #ff7604;
				color: #fff;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}

		}

		.actives {
			position: relative;
			width: 100%;
			margin-top: 20rpx;

			&::after {
				width: 670rpx;
				height: 2rpx;
				background-color: #efefef;
				content: '';
				position: absolute;
				left: 0;
				top: 25rpx;
				transform: translateY(-1rpx);
				z-index: 1;
			}

			.active-name {
				display: inline-block;
				font-size: 24rpx;
				background-color: #efefef;
				border-radius: 10rpx 0 10rpx 0;
				position: relative;
				padding: 2rpx 15rpx;
				position: relative;
				z-index: 3;

			}

			.good-pay {
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: #ff7604;
				color: #fff;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}

			.active-info {

				.good-rules {
					flex: 1;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					position: relative;

					.good-tag {
						font-size: 24rpx;
						padding: 2rpx 10rpx;
						border-radius: 5rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 15rpx;
						overflow: hidden;
					}

					.good-tag-red {
						background-color: #ff5748;
						color: #fff;

					}

					.good-tag-orange {

						color: #ff7701;
						border: 1rpx solid #ff7701;
						border-radius: 10rpx;
					}

					.good-tag-green {
						color: #1bc182;
						border: 1rpx solid #1bc182;
						border-radius: 10rpx;
					}
				}

				.active-time {
					font-size: 24rpx;
					color: #999;
					margin-right: 20rpx;
				}

				.active-progress {
					text-align: center;
					font-size: 24rpx;
					color: #999;
					margin-left: 50rpx;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-90%);

					.active-line {
						width: 110rpx;
						height: 15rpx;
						border-radius: 10rpx;
						background-color: #ffcac6;
						margin-right: 10rpx;
						margin-top: 10rpx;

						.line {
							width: 0%;
							height: 100%;
							background-color: #ff5748;
							border-radius: 10rpx;
						}
					}

					text {
						color: #ff5748;
					}
				}
			}

		}
	}
</style>